<template>
<div class='page-container'>
  <div>源对象：</div>
  <div v-for="(value, key, index) in sourceData" :key="index">
    {{ index }}. {{ key }} - {{ value }}
  </div>
  <section class="btn-wrap">
    <el-button type="primary" @click="objectAssignMerge">Object.assign合并</el-button>
    <el-button type="primary" @click="es6ExtendMerge">ES6中的扩展运算符合并</el-button>
  </section>
  <hr/>
  <div>合并后的对象：</div>
  <div v-for="(value, key, index) in targetData" :key="index">
    {{ index }}. {{ key }} - {{ value }}
  </div>
</div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      sourceData: {
        name: "名字1"
      },
      targetData: {}
    };
  },
  computed: {},
  //方法集合
  methods: {
    //Object.assign合并 --> Object.assign(target, source1, source2..)
    objectAssignMerge() {
      Object.assign(this.targetData, this.sourceData);
    },
    //ES6中的扩展运算符合并 --> {...x, ...y}
    es6ExtendMerge() {
      this.targetData = { ...this.targetData, ...this.sourceData };
    }
  }
};
</script>

<style lang='scss' scoped>
.btn-wrap {
  margin: 15px 0;
}
</style>
